<template>
    <el-container class="detail">
        <!-- 遮罩层 -->
        <div class="mask" v-show="isOpen">
            <div class="content" style="">
                <p>参加活动</p>
                <div>
                    <img class="img" src="../../../public/mt.png" alt="">
                    <img class="img" src="../../../public/mt.png" alt="">
                    <img class="img" src="../../../public/mt.png" alt="">
                    <img class="img" src="../../../public/mt.png" alt="">
                </div>
                <div class="text">
                    <p>自己玩</p>
                    <p>找伙伴</p>
                    <p>找 CP</p>
                    <p>招妆娘</p>
                </div>
                <div style="text-align: right;padding: 10px;">
                    <el-button type="danger">确认参加</el-button>
                </div>
                <div class="close" @click="close()">
                    <img src="../../../public/close.png" alt="">
                </div>
            </div>
        </div>
        <el-header class="header" style="height: 300px;">
            <div>
                <img src="https://img.nyato.com/data/upload/2023/0311/10/640bed5ae3da0.jpg!330x450cut" alt="">
                <div class="center">
                    <p class="title">AACGPRO动漫游戏展</p>
                    <p>
                        <i class="el-icon-location" style="font-size: 18px;"></i>
                        <span style="font-size: 14px;">上海市 上海市 普陀区 上海跨国采购会展中心</span> 
                    </p>
                    <p>
                        <i class="el-icon-pie-chart" style="font-size: 18px;"></i>
                        <span style="font-size: 14px; margin-left: 5px;">04/30 - 05/01</span>
                    </p>
                    <hr>
                    <p class="type">
                        <span>活动类型:</span>
                        <span class="right">同人展会</span>
                    </p>
                    <div class="share">
                        <el-button type="danger">喵特推荐</el-button>
                        <span>分享</span>
                    </div>
                </div>
                <div class="join-activity">
                    <div class="btn"  @click="open()">
                       <p class="join">参 加 活 动</p>
                       <p class="love"> <i class="el-icon-mouse" style="font-size: 28px;"></i> 心动不如行动</p>
                    </div>
                    <p class="error">情报有误?点击反馈</p>
                </div>
            </div>
        </el-header>
        <el-container class="body">
            <el-main class="main" style="width: 700px;background-color: #f5f5f5;position: relative;">
                <div class="rate">
                    <div class="left">
                        <p class="title">综合评价</p>
                        <el-rate
                            style="width:200px;margin: 10px 0;"
                            v-model="value"
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}分">
                        </el-rate>
                        <p class="base">基本信息</p>
                        <div>
                            <p><span class="s1">场馆设施</span><span class="s2">普通场馆级</span></p>
                            <p><span class="s1">交通方式</span><span class="s2">地铁公交直达</span></p>
                            <p><span class="s1">收藏个数</span><span class="s2">121人</span></p>
                            <p><span class="s1">平台热度</span><span class="s2">喵特推荐</span></p>
                        </div>
                    </div>
                    <div style="height: 160px; border-left: 1px solid #dedede;margin-top: 40px;"></div>
                    <div class="right">
                        <p class="title">往届评价</p>
                        <div>
                            <p>共有 0 人参与了往届评价</p>
                            <div>
                                <p>5星</p>
                                <div></div>
                                <p>0.00%</p>
                            </div>
                            <div>
                                <p>4星</p>
                                <div></div>
                                <p>0.00%</p>
                            </div>
                            <div>
                                <p>3星</p>
                                <div></div>
                                <p>0.00%</p>
                            </div>
                            <div>
                                <p>2星</p>
                                <div></div>
                                <p>0.00%</p>
                            </div>
                            <div>
                                <p>1星</p>
                                <div></div>
                                <p>0.00%</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="activity-card">
                    <div class="card">帖子</div>
                    <div class="btn" @click="$router.push('../pushCard')">
                       <p class="push">发布帖子</p>
                    </div>
                    <div class="jiao"></div>
                </div>
                <div class="card-detail">
                    <!-- 上边再套一层盒子的原因是需要用绝对定位 将一个大盒子定在页面上 然后盒子里用小盒子写详情内容就可以v-for 否则所有的小盒子都需要绝对定位 v-for的时候高度无法确定  -->
                    <div class="detail-item">
                        <div class="header-img">
                            <img src="https://img.nyato.com/data/upload/2023/0311/10/640bed5ae3da0.jpg!330x450cut" alt="">
                        </div>
                        <div class="content">
                            <p class="uname">爷傲奈我何</p>
                            <div class="tags">
                                <p>2023-3-30</p><span>来自：</span> <p> AACGPRO动漫游戏展</p>
                            </div>
                            <hr>
                            <div class="txt">承各种道具定制</div>
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="header-img">
                            <img src="https://img.nyato.com/data/upload/2023/0311/10/640bed5ae3da0.jpg!330x450cut" alt="">
                        </div>
                        <div class="content">
                            <p class="uname">爷傲奈我何</p>
                            <div class="tags">
                                <p>2023-3-30</p><span>来自：</span> <p> AACGPRO动漫游戏展</p>
                            </div>
                            <hr>
                            <div class="txt">承各种道具定制</div>
                        </div>
                    </div>
                    <div class="detail-item">
                        <div class="header-img">
                            <img src="https://img.nyato.com/data/upload/2023/0311/10/640bed5ae3da0.jpg!330x450cut" alt="">
                        </div>
                        <div class="content">
                            <p class="uname">爷傲奈我何</p>
                            <div class="tags">
                                <p>2023-3-30</p><span>来自：</span> <p> AACGPRO动漫游戏展</p>
                            </div>
                            <hr>
                            <div class="txt">承各种道具定制</div>
                        </div>
                    </div>
                </div>
            </el-main>
            <el-aside class="aside" width="300px" style="background-color: #fff;">
                <div>
                    <div class="joined">
                        ヾ(≧▽≦*)o<p>已参加的人</p> 
                        <span>共132人参加</span>
                    </div>
                    <div class="query">
                        <p class="title">常见问题</p>
                        <div><p class="Q">Q</p> <p class="text">用户如何发布展会信息</p></div>
                        <div><p class="A">A</p><p class="text">只通过电脑端首页右上角【发布】选择发布展会，完成操作并且喵特后台审核成功后，就可以成功发布展会</p></div>
                        <div><p class="Q">Q</p> <p class="text">如何申请喵特工</p></div>
                        <div><p class="A">A</p><p class="text">若当前城市有喵特工的招聘，可在喵特APP我的页面出现喵特工icon，点击喵特工icon即可进入申请页面</p></div>
                        <div><p class="Q">Q</p> <p class="text">去漫展必须出cos吗？</p></div>
                        <div><p class="A">A</p><p class="text">漫展中人员的主要组成部分是ACGN爱好者，ACGN分别是动画、漫画、游戏、小说，不是cosplay展览，大家出cos去漫展是去玩的，不是必须的。</p></div>
                        <div><p class="Q">Q</p> <p class="text">我想要申请摊位、报舞台节目、自荐NPC，应该怎么做？</p></div>
                        <div><p class="A">A</p><p class="text">找你要去的那场漫展的主办询问细节，每一场漫展都是不一样的、，一般漫展展宣里有主办联系方式。</p></div>
                        <div><p class="Q">Q</p> <p class="text">漫展几点开场？</p></div>
                        <div><p class="A">A</p><p class="text">一般早上9点-10点</p></div>
                        <div><p class="Q">Q</p> <p class="text">漫展几点闭馆？</p></div>
                        <div><p class="A">A</p><p class="text">一般漫展是下午5点半-6点闭馆</p></div>
                        <div><p class="Q">Q</p> <p class="text">cn是什么意思？</p></div>
                        <div><p class="A">A</p><p class="text">是 coser name 的缩写，这个到现在还有很多人不知道的，很多摄影、游客、都会介绍自己的 CN 是什么什么，其实只要说自己的昵称或者“圈名”是什么就好。这里的“圈名”一般是指某个圈子的名称，在漫展这里就是“二次元圈”“动漫圈”“C 圈”“ACG 圈”的意思，而“C 圈”就是“cosplay 圈”的缩写。</p></div>
                        <div><p class="Q">Q</p> <p class="text">妆娘”“妆爹”什么意思？</p></div>
                        <div><p class="A">A</p><p class="text">一般就是会化妆的男女化妆师了，漫展里会有一些有偿或者无偿的化妆师，来帮那些不会化妆的 coser 们化妆或者补妆。</p></div>
                        <div><p class="Q">Q</p> <p class="text">什么是集邮？</p></div>
                        <div><p class="A">A</p><p class="text">集邮指收藏邮票，在二次元圈里面指跟朋友自拍合影，代表你跟朋友在这场漫展遇到过，盖个章吧，另外也有收集和朋友的合照的意思。</p></div>
                    </div>
                </div>
            </el-aside>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        data() {
            return {
                value: 3.5,//活动详情评价
                isOpen:false,//参加活动遮罩层是否打开
            }
        },
        methods: {
            // 参加活动遮罩层打开与关闭
            open() {
                this.isOpen=true
            },
            close(){
                this.isOpen=false
            }
        }
    }
</script>

<style lang="scss" scoped>
.detail{
    position: relative;
    .mask{
        position: fixed;
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
        z-index: 1000;
        background-color: rgba(0,0,0,0.5);
        .content{
            background-color: #fff;
            position:absolute;
            top:50%;
            left:50%;
            transform: translateX(-50%);
            border-radius: 10px;
            p{
                text-align: center;
                margin: 10px 0;
                color: #666;
            }
            .img{
                width: 100px;
                height: 100px;
                margin: 20px 15px;
                border-radius: 50%;
                background-color: #eee;
                &:hover{
                    background-color: #ff6388;
                }
                &:active{
                    background-color: #ff6388;
                }
            }
            .text{
                display: flex;
                justify-content: space-around;
            }
            .close{
                width: 70px;
                height: 70px;
                background-color: #fff;
                border-radius: 50%;
                position: absolute;
                top: -25px;
                right: 0;
                img{
                    width: 40px;
                    margin-left: 15px;
                    margin-top: 10px;
                }
                &:hover{
                    background-color: #eee;
                }
            }
        }
    }
    .header{
        background-color: #fff;
        img{
            height: 240px;
        }
        >div{
            width: 1200px;
            margin: 20px auto;
            display: flex;
            >.center{
                width: 700px;
                margin-left: 15px;
                .title{
                    margin-top: 15px;
                    font-size: 26px;
                }
                p{
                    padding: 0;
                    margin: 10px 0;
                    color: #666;
                    i{
                        font-size: 30px;
                        font-weight: bold;
                        color: #ffbc47;
                        margin-right: 5px;
                    }
                }
                hr{
                    width: 600px;
                    margin: 10px 0 0 30px;
                }
                .type{
                    margin-left: 30px;
                    font-size: 30px;
                    color: #ffbc47;

                    .right{
                        margin-left: 10px;
                    }
                }
                .share{
                    margin-top: 25px;
                    margin-bottom: 0px;
                    display: flex;
                    align-items: center;
                    span{
                        display: inline-block;
                        margin-left: 30px;
                        color: #ffbc47;
                        font-size: 25px;
                        opacity: 0.6;
                        &:hover{
                            opacity: 1;
                        }
                    }
                }
            }
            >.join-activity{
                .btn{
                    box-sizing: border-box;
                    padding-top: 15px;
                    width: 300px;
                    height: 100px;
                    border-radius: 15px;
                    background-color: #ff6388;
                    color: #fff;
                    text-align: center;
                    cursor: pointer;
                    .join{
                        font-size: 28px;
                        font-weight: bold;
                    }
                    .love{
                        margin-left: 80px;
                        display: flex;
                        align-items: center;
                        margin-top: 10px;
                        font-size: 18px;
                        text-align: center;
                    }
                    &:hover{
                        background-color: darken(#ff6388, 3%);
                    }
                    &:active{
                        background-color: darken(#ff6388, 5%);
                    }
                }
                .error{
                    color: #ffbc47;
                    margin: 25px 0 25px 80px;
                    font-size: 18px;
                    cursor: pointer;
                    &:hover{
                        color: #ff5079;
                    }
                }
            }
        }
    }
    .body{
        width: 1200px;
        margin: 20px auto;
        background-color: #fff;
        .main{
            display: flex;
            justify-content: space-between;
            .rate{
                width: 95%;
                box-sizing: border-box;
                padding: 30px 15px;
                display: flex;
                justify-content: space-evenly;
                background-color: #fff;
                height: 270px;
                .left{
                    width: 450px;
                    .title{
                        border-left:2px solid #ff5079 ;
                        padding-left:5px ;
                        font-size: 18px;
                        font-weight: bold;
                    }
                    .base{
                        font-size: 20px;
                        color: #666;
                        font-weight: bold;
                        margin-top: 10px;
                    }
                    >div{
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-evenly;
                        width: 400px;
                        p{
                            width: 195px;
                            text-align: left;
                            margin: 10px 0;
                            .s2{
                                margin-left: 8px;
                                font-size: 20px;
                                color: #ff5079;
                                font-weight: bold;
                            }
                        }
                    }
                }
                .right{
                    width: 420px;
                    .title{
                        margin-left: 15px;
                        border-left:2px solid #ff5079 ;
                        padding-left:5px ;
                        font-size: 18px;
                        font-weight: bold;
                    }
                    >div{
                        >p{
                            margin: 15px 0 15px 15px;
                            color: #666;
                        }
                        >div{
                            width: 250px;
                            justify-content: space-evenly;
                            display: flex;
                            align-items: center;
                            margin: 5px 0;
                            p{
                                width: 30px;
                            }
                            >div{
                                width: 130px;
                                height:15px;
                                border:1px solid #ffbc47;
                                border-radius:15px
                            }
                        }
                    }
                }
            }
            .activity-card{
                position: absolute;
                box-sizing: border-box;
                background-color: #fff;
                padding: 15px 30px;
                width: 820px;
                display: flex;
                align-items: center;
                border-radius: 5px;
                box-shadow: 5px 5px 15px #ccc;
                top: 320px;
                .card{
                    width: 100px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    border-left: 3px solid #ff5079;
                }
                .btn{
                    box-sizing: border-box;
                    margin-left: 500px;
                    width: 240px;
                    height: 70px;
                    line-height: 70px;
                    border-radius: 15px;
                    background-color: #ff6388;
                    color: #fff;
                    text-align: center;
                    cursor: pointer;
                    .push{
                        font-size: 28px;
                        font-weight: bold;
                    }
                    &:active{
                        background-color:darken(#ff6388, 5%);
                    }
                }
                .jiao{
                    position: absolute;
                    bottom: -20px;
                    left: 60px;
                    width: 0;
                    height:0;
                    border: 10px solid transparent;
                    border-top: 10px solid #fff;
                }
            }
            .card-detail{
                position: absolute;
                box-sizing: border-box;
                background-color: #f5f5f5;
                padding: 15px 0px;
                width: 820px;
                top: 440px;
                .detail-item{
                    margin-top: 30px;
                    background-color: #fff;
                    padding-bottom: 40px;
                    width: 100%;
                    border-radius: 5px;
                    box-shadow: 5px 5px 5px #ccc;
                    display: flex;
                    .header-img{
                        padding: 15px;
                        box-sizing: border-box;
                        img{
                            width: 50px;
                            height: 50px;
                            border-radius: 50%;
                        }
                    }
                    .content{
                        flex: 1;
                        padding: 5px;
                        font-size: 13px;
                        color: #666;
                        .uname{
                            margin-top: 15px;
                            color: #333;
                            font-size: 18px;
                            font-family: '楷体';
                        }
                        p{
                            margin-right: 5px;
                            &:hover{
                                color: #ff5079;
                            }
                        }
                        .tags{
                            display: flex;
                            margin:5px 0;
                        }
                        .txt{
                            text-align: left;
                            margin: 10px 0;
                            color: #333;
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
    .aside{
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 5px;
        .joined{
            margin-top: 15px;
            display: flex;
            padding-bottom: 15px;
            border-bottom: 1px solid #ffbc47;
            p{
                font-size: 18px;
                font-weight: bold;
            }
            span{
                display: inline;
                color: #ff5079;
                font-size: 14px;
                margin-top: 7px;
                margin-left: 15px;
            }
        }
        .query{
            margin-top: 20px;
            background-color: #fff;
            border-radius: 5px;
            padding: 15px;
            >.title{
                box-sizing: border-box;
                padding-bottom: 10px;
                text-align: center;
                color: #666;
                font-weight: bold;
                font-size: 18px;
                border-bottom: 1px solid #ffbc47;
            }
            >div{
                margin-bottom: 5px;
                box-sizing: border-box;
                display: flex;
                padding: 0 5px;
                >.Q{
                    color: #ffbc47;
                }
                >.A{
                color: #ff5079;
                }
                >.text{
                    margin-top: 3px;
                    width:80%;
                    text-align: left;
                    margin-left: 24px;
                    font-size: 13px;
                    color: #666;
                    cursor: pointer;
                    &:hover{
                        color: #aaa;
                    }
                }
            }

        }
    }
}
.box{
    background-color: red;
}
</style>